<template>
  <div>
    <p>百度地图使用之前呢,首先需要在<span>public文件夹的html文件</span>引入<span>百度api文件</span>  script标签中引入<span>src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"</span></p>
    <a href="https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey" target="_blank">点击查看教程: 百度地图获取密钥ak</a>
    <div id="container"></div>
  </div>
  
</template>

<script>
export default {
  data(){
    return {

    }
  },
  methods:{
    getMap(){
      //使用之前呢,首先需要在public文件夹的html文件引入百度api文件
      // script标签中引入src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"
      var map = new BMapGL.Map("container");          // 创建地图实例 
      var point = new BMapGL.Point(108.724444,34.306486);  // 创建点坐标 
      map.centerAndZoom(point, 18);                 // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      map.setHeading(10);   //设置地图旋转角度
      map.setTilt(40);       //设置地图的倾斜角度
      // 禁止地图旋转和倾斜可以通过配置项进行设置
      var map = new BMapGL.Map("allmap",{
          enableRotate: false,
          enableTilt: false
      });
    }
  },
  mounted(){
    this.getMap()
  }
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 550px;
}
a {
  color: blue;
}
span {
  color: blueviolet;
  font-weight: 700;
}
</style>